<template>
	<div v-if="comSummarize">
		<headercontent v-bind:headerTitle = "headerTitle"></headercontent>
		<div class="itemBlock"  >
			<div class="itemContent">
				<table border="0" cellspacing="0" cellpadding="0"><tbody><tr>
					<td class="itemInfo">
						<img class="companyIco" v-lazy="comSummarize.img" alt="" />
					</td>
					<td style="width:75%">
						<div class="itemDetail">
							<h3><span>{{ comSummarize.name }}</span></h3>
							<div class="clearfloat">
								<div class="message l">
									<p class="info color_666">
										专家评分值 <span class="score">{{ comSummarize.score }}</span>
										企业好评率<span>{{comSummarize.comment}}%</span><img src="../assets/img/cv@2x.png" alt="" />
									</p>
									<p class="info color_999">{{ comSummarize.view }}人已浏览咨询</p>
								</div>
							</div>
						</div>
					</td>
				</tr></tbody></table>
			</div>
		</div>
		<div class="introduceBlock">
			<h2>机构介绍</h2>
			<div class="analystInfo" style="padding-bottom: 1px;text-align: left;">
				<div class="introduceDetail color_666" >
					{{ comSummarize.introduce }}
					<div class="btnMore" v-on:click="moreInfoBtn">
						<span>查看更多</span>
					</div>
				</div>
			</div>
		</div>
		<div class="introduceBlock">
			<h2>公司风采</h2>
			<div class="introduceContent">
				<img class="scenery" v-lazy="comSummarize.pic" alt="" />
			</div>
		</div>
		<div class="introduceBlock">
			<h2>企业证书 <img class="moreMessage r" src="../assets/img/lo@2x.png" alt="" /></h2>
			<div class="introduceContent" >
				<div class="slider certificateList">
					<ul class="clearfloat" v-lazy-container="{ selector: 'img' }">
						<li v-for="item in comSummarize.certificate">
							<img v-lazy="item" alt="" />
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="introduceBlock">
			<h2>基本资料 <img class="moreMessage r" src="../assets/img/lo@2x.png" alt="" /></h2>
			<div class="introduceContent color_666" >
				<table><tbody>
					<tr>
						<td class="tdTitle">所属国家:</td>
						<td>{{ comSummarize.country }}</td>
						<td class="tdTitle">成立时间:</td>
						<td>{{ comSummarize.time }}</td>
					</tr>
					<tr>
						<td class="tdTitle">许可机构:</td>
						<td>{{ comSummarize.organization }}</td>
						<td class="tdTitle">经营模式:</td>
						<td>{{ comSummarize.model }}</td>
					</tr>
					<tr>
						<td class="tdTitle">平台软件:</td>
						<td>{{ comSummarize.software }}</td>
						<td class="tdTitle">入金方式:</td>
						<td>{{ comSummarize.method }}</td>
					</tr>
					<tr>
						<td class="tdTitle">出金优惠:</td>
						<td>{{ comSummarize.discount }}</td>
						<td class="tdTitle">最低入金:</td>
						<td>{{ comSummarize.money }}美元</td>
					</tr>
				</tbody></table>
			</div>
		</div>
		<div class="introduceBlock">
			<h2 class="inquiryList">咨询经纪人 <img class="moreMessage r" src="../assets/img/lo@2x.png" alt="" /></h2>
			<template v-for="(item, index) in comSummarize.contacts">
				<div class="introduceContent" v-bind:class="index+1 == comSummarize.contacts.length ? '' : 'tableBorder' ">
					<table border="0" cellspacing="0" cellpadding="0"><tbody><tr>
						<td class="itemPerson">
							<img class="personIco" v-lazy="item.img" alt="" />
						</td>
						<td class="itemName">
							<h3><span>{{ item.name }}</span></h3>
							<p class="info color_666">{{ item.introduce }}</p>
						</td>
						<td style="width:105px;">
							<ul class="contactMethod">
								<li v-clipboard:copy="item.weixin" v-clipboard:success="onCopy" v-clipboard:error="onError" type="微信">
									<img class="taskIco" src="../assets/img/kjg@2x.png" alt="" />
								</li>
								<li v-clipboard:copy="item.email" v-clipboard:success="onCopy" v-clipboard:error="onError" type="邮箱">
									<img class="taskIco" src="../assets/img/err@2x.png" alt="" />
								</li>
								<li>
									<a v-bind:href="'tel:' + item.phone"><img class="taskIco" src="../assets/img/sdgg@2x.png" alt="" /></a>
								</li>
							</ul>
							
						</td>
					</tr></tbody></table>
				</div>
			</template>
		</div>
		<div class="introduceBlock">
			<div class="scroceNumber color_666">
				服务评分
				<span class="starsList">
					<img src="../assets/img/78k@2x.png" alt="" v-for="item in comSummarize.stars" />
				</span>
				<span class="number">{{ comSummarize.service }}</span>
			</div>
		</div>
		<div class="switchSecond">
			<ul class="tabSecond clearfloat">
				<li class="active l"><a href="#"><span>1728</span><br>(全部)</a></li>
				<li class="l"><a href="#"><span>1728</span><br>(好评)</a></li>
				<li class="l"><a href="#"><span>8</span><br>(中评)</a></li>
				<li class="l"><a href="#"><span>2</span><br>(差评)</a></li>
			</ul>
			<div class="tabcontent my-swiper-container">
				<div class="contentBlock swiper-wrapper">
					<div class="swiper-slide" v-for="item in evaluateList">
						<template v-if="item.message.length">
							<table class="commentTable" border="0" cellspacing="0" cellpadding="0" v-for="list in item.message"><tbody>
								<tr>
									<td class="itemIco"><img v-lazy="list.img" alt="" class="personIco"></td>
									<td>
										<p class="commentTitle">{{ list.name }}<span>{{ list.data }}天前</span></p>
										<p>
											服务评分
											<span class="starsList">
												<img src="../assets/img/78k@2x.png" alt="" v-for="star in list.stars" />
											</span></p>
										<div class="commentInfo">{{ list.introduce }}</div>
										<ul class="commentImg clearfloat">
											<li v-for="pic in list.pics"><img v-lazy="pic" alt="" /></li>
										</ul>
									</td>
								</tr>
							</tbody></table>
						</template>
						<template v-else>
							<div class="commentTable noDataDiv">没有评论 </div>
						</template>
					</div>
				</div>
			</div>
		</div>
		<div class="bottomBtn clearfloat">
			<p class="btn btnRed l" href="#"><img src="../assets/img/uyt@2x.png"/><span>投票</span></p>
			<p class="btn btnYell r" href="#" v-on:click="inquiryListPos"><img src="../assets/img/kf@2x.png"/><span>咨询商家</span></p>
		</div>
	</div>
</template>

<script>
	import headercontent from './header'
	import data from '../util/mock'
	import axios from 'axios'
	export default {
  		name: 'IntroduceCom',
  		components:{headercontent},
  		data() {
			return {
				headerTitle: "公司介绍",
				comSummarize:{},
				evaluateList:{},
			}
		},
  		mounted() {
			this.init();
			console.log(this.$route.params.id);
		},
		methods: {
			init(){
				var _this = this;
				axios.get('/test/mockData', {
				  params: {name: "IntroduceCom",id:_this.$route.params.id}
				}).then(function(res) {
					console.log(res.data);
					_this.comSummarize = res.data.comSummarize;
					_this.evaluateList = res.data.evaluateList;
					_this.$nextTick(()=>{
						var obj = $(".introduceDetail");
					    if(obj.height() > 50){
					    	obj.css("height","65px");
					    }else{
					    	$(".btnMore").hide();
					    }
				    	var swiper2 = new Swiper('.my-swiper-container', {
					      	pagination: {
						        el: '.tabSecond',
						        clickable: true,
						        bulletClass : 'l',
						        bulletActiveClass: 'active',
						        renderBullet: function (index, className) {
						          switch (index) {
									  case 0: name='<span>'+_this.evaluateList[0].number+'</span><br>(全部)';break;
									  case 1: name='<span>'+_this.evaluateList[1].number+'</span><br>(好评)';break;
									  case 2: name='<span>'+_this.evaluateList[2].number+'</span><br>(中评)';break;
									  case 3: name='<span>'+_this.evaluateList[3].number+'</span><br>(差评)';break;
									  default: name='';
									}
							      return '<li class="' + className + '"><a href="#">' + name + '</a></li>';
							  }
					        },
						    on: {
							    slideChangeTransitionEnd: function(){
							     _this.adjustHeigt();
							    },
							    init: function(){
							      _this.adjustHeigt();
							    }
							}
					    });
				   });
				}).catch(function(error) {
					console.log(error);
				});
			},
			adjustHeigt(){
			    var activeHeight = 0;
			    $(".my-swiper-container .swiper-slide-active .commentTable").each(function(index,item){
			      	activeHeight += $(item).height()+ 10;
			    });
			    activeHeight = activeHeight + 10;
			    if(activeHeight < 205){
			      	activeHeight = 95;
			    }
			    $(".my-swiper-container").css("height",activeHeight);
			},
			onCopy(e){
			  var _this = this;
		      $(".usualMessage").empty().append("您已成功复制了分析师的" + e.trigger.type + "<br><span class='voteInfo'>" + e.text + "</span><br>" + "快去联系分析师吧~");
		      _this.openDialog();
		      
		    },
		    onError(e) {
		      var _this = this;
		      $(".usualMessage").empty().append("<span style='color:red'>无法复制文本,请升级浏览器</span>");
		      _this.openDialog();
		    },
		    openDialog(){
				$(".usualMessage").show();
				$(".dialogTitle").empty().append("系统消息");
				$(".dialogMask").fadeIn();
    			$(".divDialog").fadeIn();
			},
			inquiryListPos(){
				 $("html,body").animate({scrollTop: $('.inquiryList').offset().top - 150});
				 return false;
			},
			moreInfoBtn(){
				$(".introduceDetail").css("height","auto");
				$(".btnMore").hide();
			},
		}
	}
</script>

<style>
	.info img {width:10px;margin-left:5px;}
	.introduceBlock {margin:10px 0px;background:#fff;}
	.introduceBlock h2{border-bottom: 1px solid #ddd; font-size: 1.8em; font-weight: normal; padding: 10px;color:#333;}
	.introduceContent {padding: 10px; font-size: 1.2em;line-height: 18px;}
	.introduceContent .tdTitle {width:56px;}
	.introduceContent tr td {vertical-align: middle;}
	.moreInfo { width: 16px; margin-left: 5px;}
	.scenery {width:100%;}
	.certificateList li {float:left;margin-right:4px;height: 82px;margin:0px 10px 10px 0px}
	.certificateList li img {height: 65px; padding: 5px; border: 1px solid #ddd;}
	.moreMessage {margin-top: 3px;}
	.introduceContent .personIco {width: 56px; border-radius: 50%;display: block;}
	td.itemPerson {width:56px;}
	.introduceContent .itemDetail h3 {margin-bottom: 5px;}
	.taskIco {height: 20px;}
	.itemName {padding-left:10px;}
	.itemName h3 {font-size: 1.6em; font-weight: normal;margin-bottom: 5px;color:#333;}
	.tableBorder {border-bottom:1px solid #ddd;}
	.scroceNumber{font-size: 1.8em; padding: 10px;}
	.starsList {margin:0px 10px;}
	.starsList img {width:14px;}
	.number {color:#f39800;}
	.tabSecond {background:#fff;}
	.tabSecond li {width: 25%; text-align: center; font-size: 1.2em; line-height: 18px; padding: 10px 0;border-bottom: 1px solid #fff;}
	.tabSecond li.active {border-color:#f50500;}
	.tabSecond li span {color:#333;}
	.tabSecond li.active span {color:#f50500;}
	.tabSecond li a {display: block;border-right:1px solid #ddd;color:#666;}
	.tabSecond li:last-child a {border-right:none;}
	.commentTable {margin: 10px 0px; background: #fff;color:#999;}
	.commentTable tr td {padding:10px;vertical-align: top;}
	.commentImg li {float: left;margin-right:4px;}
	.commentImg img {height:55px;}
	.commentTable tr td:last-child {padding-left:0px;}
	.itemIco {width:45px;}
	.itemIco .personIco {width:45px;border-radius:50%;}
	.commentTable p {font-size:1.2em;}
	.commentTable .commentTitle {margin-bottom:5px;font-size:1.4em;}
	.commentTitle span {float:right;}
	.commentInfo {margin:15px 0px;font-size: 1.2em;}
	.bottomBtn {background: #fff;}
	.bottomBtn .btn {width: 49%; text-align: center;color: #fff; font-size: 1.6em; height: 35px; line-height: 35px;position: relative;}
	.bottomBtn .btnYell {background:#F39801}
	.bottomBtn .btnRed {background:#F40500}
	.bottomBtn .btn img {position: absolute; top: 7px; height: 20px;}
	.bottomBtn .btn span {padding-left:30px;}
	.contactMethod {text-align: right;}
	.contactMethod li {display: inline-block;margin-left:5px;}
	.noDataDiv{text-align: center; height: 75px; line-height: 75px; color: red;font-size: 1.2em;}
</style>